<link type="text/css" rel="stylesheet" href="css/proPlan/proPlan.css"/>


<div class="row addProGWrap">
  <div class="col-sm-12">
    <div class="form-inline ProGListHeader">
      <div class="form-group">
        <label for="exampleInputName2">推广组名称：</label>
        <label for="exampleInputName2">51厂家促销</label>
        <button id="chooseProGListBtn"  class="btn btn-primary">
          重新选择推广组
        </button>
      </div>    
    </div>
    <div class="form-horizontal setProPlanNameWrap">
      <h3 class="proPlanHeader">设置推广计划名称</h3>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">推广组名称：</label>
        <div class="col-sm-4 addProNameTextWrap">
          <input type="text" class="form-control" id="addProNameText" onkeydown="checkLen(this,'fourty')" placeholder="请输入推广计划名称">
            <span class="limit">
                <span id="fourty">0</span>
                /40
            </span>
        </div>  
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">推广内容分类：</label>
        <div class="col-sm-4 addProNameTextWrap">
          <select class="form-control">
            <option>全部</option>
            <option>启用</option>
            <option>已停用</option>
          </select>
        </div>  
        <label  class="col-sm-4 control-label alignLeft" ><span id="multiBrandConDetailBtn" class="multiBrandConDetailBtn" >各手机品牌推广内容限制说明>></span></label>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">择推广方式：</label>
        <div class="col-sm-4 ">
          <p class="selectLabel select">CPT</p>
          <p class="selectLabel ">CPM</p>
          <p class="selectLabel ">CPC</p>
        </div>  
      </div>
      <div class="proPlanChooseBox">
        <div class="proPlanChooseBoxTit">
          <label class="control-label" >选择推广品牌：</label>
        </div>
        <div class="proPlanChooseBoxMain">
          <div class="proPlanNameChoose">
            <p class="proPTop">手机品牌</p>
            <div id="mobileBrandChoose" class="proPBotCon">
              <p class="selectLabel select">CPT</p>
              <p class="selectLabel ">CPM</p>
              <p class="selectLabel ">CPC</p>
            </div>
          </div>
          <div class="proPlanNameChoose">
            <p class="proPTop">已选择</p>
            <div id="mobileBrandSelected" class="proPBotCon">
              <div class="selectedBrand">
                <p class="selectedBrandLeft">CPT</p>
                <p class="selectedBrandRight"><span class="glyphicon glyphicon-remove"></span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">设置推广范围：</label>
        <div class="col-sm-4 ">
          <p class="selectLabel select">通投</p>
          <p class="selectLabel ">定向</p>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">选择手机型号：</label>
        <div class="col-sm-4 ">
          <p class="selectLabel select">不限</p>
          <p class="selectLabel ">按型号</p>
        </div>  
      </div>
      <div class="proPlanChooseBox">
        <div class="proPlanChooseBoxTit">
          <label class="control-label" ></label>
        </div>
        <div class="proPlanChooseBoxMain">
          <div class="proPlanNameChoose">
            <p class="proPTop">手机型号</p>
            <div id="proMobileSpecWrap" class="proPBotCon">
              <div class="mobileSpecConWrap">
                <label class="mobileSpecCon">
                  <span class="brandTit">华为（huawei）</span>
                  <div><input type="checkbox" /></div>
                </label>
                <p class="selectLabel select">CPT</p>
                <p class="selectLabel ">CPM</p>
                <p class="selectLabel ">CPC</p>
              </div>
            </div>
          </div>
          <div class="proPlanNameChoose">
            <p class="proPTop">已选择</p>
            <div id="proMobileSpecSelectedWrap" class="proPBotCon">
              <div class="selectedBrand">
                  <p class="selectedBrandLeft">华为-CPT</p>
                  <p class="selectedBrandRight"><span class="glyphicon glyphicon-remove"></span></p>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">
          选择推广地域：
        </label>
        <div class="col-sm-4 ">
          <p class="selectLabel select">不限</p>
          <p class="selectLabel ">按地域</p>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">选择手机型号：</label>
        <div class="col-sm-2 ">
          <p class="selectLabel select">不限</p>
          <p class="selectLabel ">按型号</p>
        </div> 
        <div class="col-sm-2">
            <label class="radio-inline">
                  <input type="radio" name="inlineRadio1" id="inlineRadio1" value="option1"> 启用
            </label>
            <label class="radio-inline">
                  <input type="radio" name="inlineRadio1" id="inlineRadio2" value="option2"> 停用
            </label>
        </div>
      </div>
      <div class="proPlanChooseBox">
        <div class="proPlanChooseBoxTit">
          <label class="control-label" ></label>
        </div>
        <div class="proPlanChooseBoxMain">
          <div class="proPlanNameChoose">
            <p class="proPTop">地域</p>
            <div id="" class="proPBotCon">
              <div class="mobileSpecConWrap">
                <label class="mobileSpecCon">
                  <span class="plusMinus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></span>
                  <span >河北省</span>
                  <div><input type="checkbox" /></div>
                </label>
                <div class="mobileSpecConSubWrap" >
                  <label class="mobileSpecConSub">
                    <span >石家庄</span>
                    <div><input type="checkbox" /></div>
                  </label>
                  <label class="mobileSpecConSub">
                    <span >石家庄</span>
                    <div><input type="checkbox" /></div>
                  </label>
                </div>
              </div>
              <div class="mobileSpecConWrap">
                <label class="mobileSpecCon">
                  <span class="plusMinus"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></span>
                  <span >河北省</span>
                  <div><input type="checkbox" /></div>
                </label>
                <div class="mobileSpecConSubWrap" style="display:none;">
                  <label class="mobileSpecConSub">
                    <span >石家庄</span>
                    <div><input type="checkbox" /></div>
                  </label>
                  <label class="mobileSpecConSub">
                    <span >石家庄</span>
                    <div><input type="checkbox" /></div>
                  </label>
                </div>
              </div>
              <div class="mobileSpecConWrap">
                <label class="mobileSpecCon">
                  <span class="brandTit">北京</span>
                  <div><input type="checkbox" /></div>
                </div>
                <div class="mobileSpecConSubWrap">
                </div>
              </label>
            </div>
          </div>
          <div class="proPlanNameChoose">
            <p class="proPTop">已选择</p>
            <div id="" class="proPBotCon">
              <div>
                <div class="selectedBrand">
                    <p class="selectedBrandLeft">oppo</p>
                    <p class="selectedBrandRight"><span class="glyphicon glyphicon-remove"></span></p>
                </div>
              </div>
              <div class="selectedBrand">
                  <p class="selectedBrandLeft">oppo</p>
                  <p class="selectedBrandRight"><span class="glyphicon glyphicon-remove"></span></p>
              </div>
              </div>
          </div>
        </div>
      </div>
      <h3 class="proPlanHeader">设置推广时间和出价</h3>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">预算：</label>
        <div class="col-sm-2 ">
          <select class="form-control">
            <option>日预算</option>
            <option>月预算</option>
            <option>年预算</option>
          </select>
        </div>  
        <div class="col-sm-2 ">
          <input type="text" class="form-control" id=""  placeholder="RMB">
        </div>
        <label  class="col-sm-2 control-label alignLeft" >最低日预算 20000元</label>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">设置推广范围：</label>
        <div class="col-sm-4 ">
          <p class="selectLabel ">设置开始和结束时间</p>
          <p class="selectLabel select">长期投放</p>
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right">选择手机型号：</label>
        <div class="col-sm-2">
            <label class="radio-inline">
                  <input type="radio" name="inlineRadio1" id="inlineRadio1" value="option1"> 启用
            </label>
            <label class="radio-inline">
                  <input type="radio" name="inlineRadio1" id="inlineRadio2" value="option2"> 停用
            </label>
        </div>
        <div class="col-sm-2 ">
          <select class="form-control">
            <option>请选择时区</option>
            <option>东八区</option>
          </select>
        </div>  
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right"></label>
        <div class="col-sm-2 ">
          <input type="text" class="form-control" id=""  placeholder="RMB">
        </div>
        
        <div class="col-sm-2 ">
          <input type="text" class="form-control" id=""  placeholder="RMB">
        </div>
      </div>
      <div class="form-group">
        <label  class="col-sm-2 control-label" align="right"></label>
        <div class="col-sm-2 ">
          <input type="text" class="form-control" id=""  placeholder="RMB">
        </div>
        <div class="col-sm-4" align="left">
          <label  class=" control-label" >最低出价8.00元 建议出价 20.81 元</label>
        </div>
      </div>
    </div>
    <div align="center">
        <button class="btn btn-primary " id="addNewproPlanSaveBtn">保存</button>
        <button class="btn btn-primary " id="">保存并添加创</button>
        <button class="btn btn-default " id="">取 消</button>
    </div>
  </div>
</div>
<!-- 重新选择推广组 -->
    <div id="rechooseProG" class="modal fade" tabindex="-1" data-width="400" data-backdrop="static">
        <div class="modal-dialog" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header border_header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title modalT">
                        <span>请选择推广组</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row chooseSecProGWrap">
                        <div class="col-sm-12">
                            <div class="form-horizontal">
                              <div class="form-group">
                                <div class="col-sm-6 addProNameTextWrap">
                                  <input type="text" class="form-control" id="" placeholder="">
                                </div>  
                                <label  class="col-sm-4 ">
                                  <button class="btn btn-primary " id="newProGSaveBtn">搜 索</button>
                                </label>
                              </div>
                            </div>                    
                            <div class="proGList">
                              <div class="form-group">
                                <label  class="col-sm-12 control-label">
                                  清明假期哈哈哈哈
                                </label>
                              </div>
                              <div class="form-group">
                                <label  class="col-sm-12 control-label">
                                  清明假期哈哈哈哈
                                </label>
                              </div>
                              <div class="form-group">
                                <label  class="col-sm-12 control-label">
                                  清明假期哈哈哈哈
                                </label>
                              </div>
                            </div>
                            </div>

                              <nav class="navBarWrap" aria-label="Page navigation">
                                <label class="label-control" >共241条记录</label>
                                <ul class="pagination">
                                  <li>
                                    <a href="#" aria-label="Previous">
                                      <span aria-hidden="true">&laquo;</span>
                                    </a>
                                  </li>
                                  <li class="active"><a href="#">1</a></li>
                                  <li><a href="#">2</a></li>
                                  <li><a href="#">3</a></li>
                                  <li><a href="#">4</a></li>
                                  <li><a href="#">5</a></li>
                                  <li><a href="#">...</a></li>
                                  <li><a href="#">24</a></li>
                                  <li>
                                    <a href="#" aria-label="Next">
                                      <span aria-hidden="true">&raquo;</span>
                                    </a>
                                  </li>
                                </ul>
                              <div class=" goToPage">
                                <div class="goToPageNum ">
                                  <input type="text" class="form-control" id="" placeholder="">
                                </div>  
                                <label  class=" label-control">
                                  跳转
                                </label>
                              </div>
                              </nav>                       
                      </div>
                </div>
                <div class="modal-footer textAlignC">
                    <div class="" align="center">
                        <button class="btn btn-primary " id="newProGSaveBtn">保存</button>
                        <button class="btn btn-default " data-dismiss="modal">放弃</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- 各手机品牌广告内容限制说明 -->
    <div id="multiBrandProConModal" class="modal fade" tabindex="-1" data-width="400" data-backdrop="static">
        <div class="modal-dialog" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header border_header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title modalT">
                        <span>各手机品牌广告内容限制说明</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row chooseSecProGWrap">

                        <div class="col-sm-12 brandConScoll">
                          <div class="multiBrandInfo">
                            <div class="multiBrandInfoTopTit">
                              <label >厂商</label>
                            </div>
                            <div class="multiBrandInfoTopCon">
                              <label >限制内容</label>
                            </div>
                          </div>
                          <div class="multiBrandInfoMain">
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                            <div class="multiBrandInfoEach">
                              <div class="multiBrandInfoTopTit">
                                <label >huawei </label>
                              </div>
                              <div class="multiBrandInfoTopCon">
                                <p>asdfaslf</p>
                                <p>asdfaslf</p>
                                <p>asdfasasdfasdfalf</p>
                                <p>dfadsfsdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
                              </div>
                            </div>
                          </div>
                      </div>
                    </div>
                </div>
                <div class="modal-footer textAlignC">
                    <div class="" align="center">
                        <button class="btn btn-primary " id="newProGSaveBtn">保存</button>
                        <button class="btn btn-default " data-dismiss="modal">放弃</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


  <script src="../../ads_html/js/proPlan/proPlan.js"></script>

